<template>
	<div class="check">
		<div class="scan">
			<div id="bcid">
				<div style="height:40%"></div>
			</div>
		</div>
	</div>
</template>
<script>
	import deviceInfo from './deviceInfo'
	//用中间变量保存是否扫码的boolean，以便在路由前卫中可以修改
	let initShowScan=false
	var scan = null
	var filter; //扫码格式，空为全类型
	var styles = {
		frameColor: "#62cff9",
		scanbarColor: "#62cff9",
	}; //边框属性，中间线属性，背景色
	export default {
		/* beforeRouteEnter(to,from,next){
			next(()=>{
				if(from.name === 'deviceFault'){
					initShowScan = false
				}
			})
		}, */
		data() {
			return {
				codeUrl: '',
				result: '',
				showScan: initShowScan,
				isScan: true
			}
		},
		mounted() {
			this.startRecognize()
		},
		components: {
			deviceInfo
		},

		methods: {
			// 创建扫描控件
			startRecognize() {
				//@ts-ignore
				if (!window.plus) return;
				//@ts-ignore
				console.log('window.plus', window.plus);
				//@ts-ignore
				scan = new plus.barcode.Barcode('bcid', filter, styles);
				scan.onmarked = onmarked;
				scan.start()
				let that = this

				function onmarked(type, result, file) {
					switch (type) {
						//@ts-ignore
						case plus.barcode.QR:
							type = 'QR'
							break
							//@ts-ignore
						case plus.barcode.EAN13:
							type = 'EAN13'
							break
							//@ts-ignore
						case plus.barcode.EAN8:
							type = 'EAN8'
							break
						default:
							type = '其它' + type
							break
					}
					// 获得code
					that.result = result.replace(/\n/g, '')
					that.closeScan()
					//关闭扫描控件
					if (!window.plus) return;
					scan.close();
					that.$forceUpdate()
					
				}
			},
			closeScan() {
				if (!window.plus) return;
				scan.close();
				this.showScan = false
				this.$router.push({name:'scane',params:{areaName:this.result}})
			}
		},
		destroyed: function() {
			if (!window.plus) return;
			scan.close();
		},
		watch: {
			"route.path"(newVal) {
				console.log(newVal)
				if (newVal != '/main/index/check') {
					if (!window.plus) return;
					scan.close();
					this.showScan = false
				}
			},
			'$route'(to, from) {
				//这样就可以获取到变化的参数了，然后执行参数变化后相应的逻辑就行了
				console.log(this.$route.query)
			},
			result(newVal) {
				if (newVal) {
					this.showScan = false
					this.closeScan()
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.scan {
		height: 100%;
	}

	#bcid {
		width: 100%;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 3rem;
		text-align: center;
		color: #fff;
		background: #ccc;
	}

	
</style>